<template>

    <el-form :model="modelData"
             ref="form"
             label-width="100px">
      <!--<el-form-item label="角色类型" >-->
        <!--<el-input v-model="modelFather.name" disabled> </el-input>-->
      <!--</el-form-item>-->

      <el-form-item label="编码" prop="code">
        <el-input v-model="modelData.code" placeholder="请输入角色编码"> </el-input>
      </el-form-item>
      <el-form-item label="名称" prop="name" required>
        <el-input v-model="modelData.name" placeholder="请输入角色名称"> </el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="modelData.description" placeholder="请输入角色描述"> </el-input>
      </el-form-item>

      <el-form-item label="上级角色" prop="uri">
        <el-tree
          ref="tree"
          :data="dataTree"
          node-key="id"
          show-checkbox
          check-strictly
          @check-change="handleCheckChange">
        </el-tree>
      </el-form-item>

      <el-form-item >
          <el-button @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </el-form-item>
      </el-form>
</template>

<script>
import { fetchTree, addObj, putObj } from 'api/admin/role'
export default {
  name: 'element',
  data () {
    return {
      modelData: {
        id: 0,
        roleTypeId: 0,
        parentId: 0,
        name: undefined,
        code: undefined,
        description: undefined
      },
      modelFather: {
        id: 0,
        name: undefined
      },
      textMap: {
        update: '编辑',
        create: '创建'
      },
      // props: {
      //   label: 'text',
      //   children: 'children'
      // },
      changed: false,
      dataTree: []
    }
  },
  created () {
    this.getTreeData()
  },
  mounted () {
    if (this.changed) {
      this.changed = false
      this.getTreeData()
    }
  },
  methods: {
    getTreeData () {
      fetchTree().then(response => {
        this.dataTree = response.data
      })
    },
    setModel (data) {
      if (!data) {
        this.modelData.id = 0
        // this.$refs.form.resetFields()
      } else {
        this.modelData.id = data.id
        this.modelData.parentId = data.parentId
        this.modelData.code = data.code
        this.modelData.name = data.name
        this.modelData.description = data.description
      }
    },
    setModelFather (data) {
      // if (data) {
      //   this.modelFather.id = data.id
      //   this.modelData.roleTypeId = data.id
      //   this.modelFather.name = data.name
      //
      // }
    },
    handleCheckChange (item, checked) {
      if (checked) {
        this.$refs.tree.setCheckedNodes([{
          id: item.id,
          text: item.text
        }])
        this.modelData.parentId = item.id
      } else {
        this.modelData.parentId = 0
      }
    },
    handleSubmit () {
      if (this.modelData.name.length > 0) {
        if (this.modelData.id < 1) {
          this.add()
        } else {
          this.update()
        }
      }
    },
    handleCancel () {
      this.$emit('cancel')
    },
    update () {
      putObj(this.modelData).then(response => {
        let code = parseInt(response.code)
        if (code === 0) {
          this.complete()
        }
      })
    },
    add () {
      addObj(this.modelData).then(response => {
        let code = parseInt(response.code)
        if (code === 0) {
          this.complete()
        }
      })
    },
    complete () {
      this.changed = true
      this.$refs.tree.setCheckedNodes([])
      this.$refs.form.resetFields()
      this.$emit('complete')
    }
  }
}
</script>
